<!-- 地图找房 -->
<template>
	<view>
		<view>
			<u-popup :show="true" :overlay="false" :duration="0" mode="top" zIndex="10076" height="37rpx">
				<view class="u-flex m-bg-w u-p-t-20 u-p-b-20" :class="show ? 'u-border-bottom' : ''">
					<view class="u-flex u-flex-1 u-flex-center" @click="gettabClick(0)">
						<view class="m-c-9" :class="0 === cut || cut0 != 0 ? 'm-c-l-g' : ''">区域</view>
						<u-icon :name="0 === cut ? 'arrow-up' : 'arrow-down'" :color="0 === cut ? '#0D523F' : '#999'"
							size="10"></u-icon>
					</view>
					<view class="u-flex u-flex-1 u-flex-center u-border-left" @click="gettabClick(1)">
						<view class="m-c-9" :class="1 === cut || cut1 != null ? 'm-c-l-g' : ''">总价</view>
						<u-icon :name="1 === cut ? 'arrow-up' : 'arrow-down'" :color="1 === cut ? '#0D523F' : '#999'"
							size="10"></u-icon>
					</view>
					<view class="u-flex u-flex-1 u-flex-center u-border-left" @click="gettabClick(2)">
						<view class="m-c-9" :class="2 === cut || cut2 != null ? 'm-c-l-g' : ''">户型</view>
						<u-icon :name="2 === cut ? 'arrow-up' : 'arrow-down'" :color="2 === cut ? '#0D523F' : '#999'"
							size="10"></u-icon>
					</view>
					<view class="u-flex u-flex-1 u-flex-center u-border-left" @click="gettabClick(3)">
						<view class="m-c-9" :class="3 === cut || cut3 != null ? 'm-c-l-g' : ''">面积</view>
						<u-icon :name="3 === cut ? 'arrow-up' : 'arrow-down'" :color="3 === cut ? '#0D523F' : '#999'"
							size="10"></u-icon>
					</view>
				</view>
			</u-popup>
			<view class="m-popup boxrea">
				<u-popup :show="show" :overlay="true" :duration="0" mode="top" height="200rpx"
					:customStyle="{ top: popupTop + 'px', borderBottomLeftRadius: '10rpx', borderBottomRightRadius: '10rpx', zIndex:9999}"
					@close="close" :closeOnClickOverlay="true">
					<view v-if="cut === 0" class="boxgu">
						<view class="u-flex u-flex-between u-flex-1 m-mg-lr">
							<view class="w_33">
								<view class="u-m-t-30" v-for="(item, index) in cityall"
									:class="cut0 === index ? 'itemon' : ''" :key="index"
									@click="getxuancity(index, item, '1')">
									{{ item.name }}
								</view>
							</view>
							<view class="w_33">
								<view class="u-m-t-30" v-for="(item, index) in cityallchild"
									:class="cityind === index ? 'itemon' : ''" :key="index"
									@click="getxuancity(index, item, '2')">
									{{ item.name }}
								</view>
							</view>
							<view class="w_33">
								<view class="u-m-t-30" v-for="(item, index) in cityallchildchild"
									:class="citychid === index ? 'itemon' : ''" :key="index"
									@click="getxuancity(index, item, '3')">
									{{ item.name }}
								</view>
							</view>
						</view>
					</view>
					<view v-else class="boxgu">
						<view class="cut1-item c62">{{ params.title }}</view>
						<view class="u-flex u-flex-wrap u-m-t-30">
							<view class="cut2-item" v-if="cut === 1" :class="cut1 === index ? 'item-on' : ''"
								v-for="(item, index) in params.list" :key="index" @click="getin(index, item, cut)">
								<text>{{ item.label }}</text>
							</view>
							<view class="cut2-item" v-if="cut === 2 && index != 1"
								:class="cut2 === index ? 'item-on' : ''" v-for="(item, index) in params.list"
								:key="index" @click="getin(index, item, cut)">
								<text>{{ item.label }}</text>
							</view>
							<view class="cut2-item" v-if="cut === 3" :class="cut3 === index ? 'item-on' : ''"
								v-for="(item, index) in params.list" :key="index" @click="getin(index, item, cut)">
								<text>{{ item.label }}</text>
							</view>
						</view>
					</view>
					<view style="height: 70rpx;"></view>
					<view class="u-flex u-abso boxbottom">
						<view class="u-flex-1" @click.stop="Reset">
							<view class="button-one">重置</view>
						</view>
						<view class="u-flex-1" @click.stop="requestStatus ? determine() : ''">
							<view class="button-two">确定</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
		<map id="map" class="map" style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" @markertap.stop="!show?tap($event):''"
			:scale="scale" :show-location="true" :markers="covers"></map>
		<u-loading-page :loading="pageLoad"></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ids: null,
				cut: null,
				scale: 16,
				latitude: null,
				longitude: null,
				covers: [],
				tabList: [{
						label: '区域',
						status: false
					},
					{
						label: '总价',
						status: false
					},
					{
						label: '户型',
						status: false
					},
					{
						label: '面积',
						status: false
					}
				],
				xianyin:true,
				show: false,
				popupTop: 0,
				params: {},
				cut0: 0,
				cut1: null,
				cut2: null,
				cut3: null,
				cutname0: null,
				cutname1: null,
				cutname2: null,
				cutname3: null,
				num: null,
				type: '',
				map: null,
				listdata: {},
				getcity: [],
				city: '',
				typenum: null,
				pi1: '',
				pit1: '',
				cityind: 0,
				citychid: 0,
				cityindname: '', //城市
				citychildname: '', // 区域
				cityallchild: [{
					name: '不限'
				}],
				cityallchildchild: [{
					name: '不限'
				}]
			};
		},
		onReady() {
			this.map = uni.createMapContext('map', this);
			this.sumHeight('.m-popup');
		},
		async onLoad(e) {
			if (e.type) {
				this.typenum = +e.type;
			}
			this.$nextTick(async function() {
				let yang = this.typenum == 12 ? 'maptowhouselist' : 'mapRoom';
				let params = {
					areaname: '',
					price: '',
					pricemax: '',
					rooms: '',
					roomsmax: '',
					loupanleixing: '新房'
				};
				if (this.typenum == 12) delete params.loupanleixing;
				for (let var1 in params) {
					if (!params[var1]) {
						delete params[var1];
					}
				}
				let markers = await this.require(yang, params);
				if (markers) {
					if (markers.length) {
						let covers = [];
						markers.map((item, index) => {
							covers.push({
								id: item.id,
								latitude: +item.lat,
								longitude: +item.lon,
								width: 35,
								height: 49,
								iconPath: this.oss + '/room/marker.png',
								callout: {
									fontSize: 16,
									bgColor: '#4B8AFE',
									borderRadius: 40,
									textAlign: 'center',
									content: item.name,
									color: '#fff',
									padding: 7,
									display: 'ALWAYS'
								}
							});
						});
						if (covers.length) {
							this.map.addMarkers({
								markers: covers,
								clear: true
							});
							this.scale = 8;
							this.map.moveToLocation({
								longitude: +covers[0].longitude,
								latitude: +covers[0].latitude
							});
							setTimeout(() => {
								this.pageLoad = false;
							}, 1000);
						}
					}
				} else {
					await this.getchu();
				}
			});

			let cityall = uni.getStorageSync('cityall');
			if (cityall) {
				this.cityall = JSON.parse(cityall);
			} else {
				let cityallNew = await this.require('cityall');
				if (cityallNew) {
					cityallNew.unshift({
						name: '不限',
						child: [{
							name: '不限',
							child: [{
								name: '不限'
							}]
						}]
					});
					this.cityall = cityallNew;
				}
			}
		},
		methods: {
			getxuancity(ind, item, key) {
				switch (+key) {
					case 1:
						this.cityind = 0;
						this.citychid = 0;
						this.cut0 = ind;
						this.cityallchild = item.child;
						this.cityallchildchild = this.cityallchild[0].child;
						this.cityindname = item.child[0].name;
						this.citychildname = item.child[0].child[0].name;
						break;
					case 2:
						this.citychid = 0;
						this.cityind = ind;
						this.cityallchildchild = item.child;
						this.cityindname = item.name;
						this.citychildname = item.child[0].name;
						break;
					case 3:
						this.citychid = ind;
						this.citychildname = item.name;
						break;
					default:
						break;
				}
			},
			// 获取当前位置
			getchu() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						that.latitude = +res.latitude;
						that.longitude = +res.longitude;
					}
				});
			},
			getin(index, item, cut) {
				this['cut' + this.cut] = index;
				if (this.cut != 0) {
					this['cutname' + cut] = item.label;
				}
				if (cut === 2) {
					let indexk = this.cut2;
					this.pi1 = indexk === 0 ? 1 : indexk === 1 || indexk === 2 ? 2 : indexk === 3 ? 3 : indexk === 4 ||
						indexk === 5 ? 4 : indexk === 6 || indexk === 7 ? 5 : 6;
					this.pit1 = indexk === 0 || indexk === 1 ? 1 : indexk === 5 ? 3 : indexk === 7 ? 4 : 2;
				}
			},
			async mapRomm() {
				let prices = [];
				let rooms = [];
				this.xianyin = false;
				let yang = this.typenum == 12 ? 'maptowhouselist' : 'mapRoom';
				let params = {
					areaname: this.citychildname === '不限' ? '' : this.citychildname,
					rooms: rooms[0] ? rooms[0].split('m')[0] : '',
					roomsmax: rooms[1] ? rooms[1].split('m')[0] : '',
					room: this.pit1,
					bedroom: this.pi1 > 5 ? '五室以上' : this.pi1,
					loupanleixing: '新房'
				};
				if (this.cut1 != null) {
					if (this.cut1 == 0) {
						params.price = '2000000以下';
					} else if (this.cut1 == 7) {
						params.pricemax = '10000000以上';
					} else if (0 < this.cut1 < 7) {
						params.price = this.cutname1.split('-')[0] * 10000;
						params.pricemax = this.cutname1.split('-')[1].split('万')[0] * 10000;
					}
				}
				if (this.cut3 != null) {
					if (this.cut3 == 0) {
						params.rooms = '50以下';
					} else if (this.cut3 == 7) {
						params.roomsmax = '200以上';
					} else if (0 < this.cut3 < 7) {
						params.rooms = this.cutname3.split('-')[0].split('m²')[0];
						params.roomsmax = this.cutname3.split('-')[1].split('m²')[0];
					}
				}
				if (this.typenum == 12) delete params.loupanleixing;
				for (let var1 in params) {
					if (!params[var1]) {
						delete params[var1];
					}
				}
				let markers = await this.require(yang, params);
				if (markers) {
					if (markers.length) {
						let covers = [];
						markers.map((item, index) => {
							this.covers.push({
								id: item.id,
								latitude: item.lat,
								longitude: item.lon,
								width: 35,
								height: 49,
								iconPath: '/static/room/marker.png',
								callout: {
									fontSize: 16,
									bgColor: '#4B8AFE',
									borderRadius: 40,
									textAlign: 'center',
									content: item.name,
									color: '#fff',
									padding: 7,
									display: 'ALWAYS'
								}
							});
						});
						if (this.covers.length) {
							this.map.addMarkers({
								markers: this.covers,
								clear: true
							});
							this.scale = 8;
							this.map.moveToLocation({
								longitude: +this.covers[0].longitude,
								latitude: +this.covers[0].latitude
							});
						}
					} else {
						let covers = [];
						this.map.addMarkers({
							markers: covers,
							clear: true
						})
					}
				}
				this.xianyin = true;
			},
			// markes
			tap(e) {
				if (this.typenum == 12) {
					this.nextNav('/pages/room/ershouditu?id=' + e.detail.markerId);
				} else {
					this.nextNav('/pages/room/details?id=' + e.detail.markerId);
				}
			},
			// 重置
			Reset() {
				this.cut0 = 0;
				this.cut1 = null;
				this.cut2 = null;
				this.cut3 = null;
				this.cutname1 = null;
				this.cutname0 = null;
				this.cutname2 = null;
				this.cutname3 = null;
				this.pit1 = null;
				this.pi1 = null;
				this.cityind = 0;
				this.citychid = 0;
				this.cityindname = '不限';
				this.citychildname = '不限';
			},
			determine() {
				this.requestStatus = false;
				this.show = false;
				let covers = [];
				this.map.addMarkers({
					markers: [],
					clear: true
				})
				this.mapRomm();
				this.requestStatus = true;
			},
			close() {
				this.show = false;
			},
			gettabClick(index) {
				this.cut = index;
				this.show = false;
				this.show = true;
				this.params = {};
				switch (index) {
					case 0:
						this.cityall.map((p, i) => {
							p.child.map((a, b) => {
								if (this.city == a.name) {
									this.cut0 = i;
									this.cityallchild = p.child;
									this.cityallchildchild = a.child;
									this.cityind = b;
								}
							});
						});
						break;
					case 1:
						this.params = {
							title: '价格区间（万）：',
							list: [{
									id: 1,
									label: '200万以下'
								},
								{
									id: 2,
									label: '200-300万'
								},
								{
									id: 3,
									label: '300-400万'
								},
								{
									id: 4,
									label: '400-500万'
								},
								{
									id: 5,
									label: '500-800万'
								},
								{
									id: 6,
									label: '800-1000万'
								},
								{
									id: 4,
									label: '1000万以上'
								}
							]
						};
						break;
					case 2:
						this.params = {
							title: '房型选择',
							list: [{
									id: 1,
									label: '一室一厅'
								},
								{
									id: 2,
									label: '两室一厅'
								},
								{
									id: 3,
									label: '两室一厅'
								},
								{
									id: 4,
									label: '三室两厅'
								},
								{
									id: 5,
									label: '四房两厅'
								},
								{
									id: 6,
									label: '四房三厅'
								},
								{
									id: 7,
									label: '五房两厅'
								},
								{
									id: 8,
									label: '五房四厅'
								},
								{
									id: 9,
									label: '六房两厅'
								}
							]
						};
						break;
					case 3:
						this.params = {
							title: '建筑面积',
							list: [{
									id: 1,
									label: '50m²'
								},
								{
									id: 2,
									label: '50m²-70m²'
								},
								{
									id: 3,
									label: '70m²-90m²'
								},
								{
									id: 4,
									label: '90m²-110m²'
								},
								{
									id: 5,
									label: '90m²-130m²'
								},
								{
									id: 6,
									label: '130m²-150m²'
								},
								{
									id: 7,
									label: '150m²-200m²'
								},
								{
									id: 8,
									label: '200m²以上'
								}
							]
						};
						break;
					default:
						break;
				}
			},
			// 计算高度
			sumHeight(element) {
				let _this = this;
				let win_height = 0;
				const query = uni.createSelectorQuery();
				query.select(element).boundingClientRect();
				query.selectViewport().scrollOffset();
				query.exec(function(res) {
					if (res[0]) {
						_this.popupTop = res[0].top + 37;
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.m-c-l-g {
		color: #0d523f;
	}

	.w_33 {
		width: 32%;
		height: 450rpx;
		overflow-y: auto;
	}

	.c62 {
		color: #636262;
	}

	.boxbottom {
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
	}

	.boxgu {
		height: 450rpx;
		overflow-y: auto;
		background-color: #f2f2f2;
	}

	.u-safe-bottom {
		display: none;
	}

	.cut1-item {
		height: 60rpx;
		line-height: 60rpx;
		background-color: #fff;
	}

	.cut3-item {
		height: 60rpx;
		line-height: 60rpx;
		color: #606060;
	}

	.cut2-item {
		display: inline-block;
		padding: 0 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-left: 25rpx;
		margin-bottom: 20rpx;
		color: #606060;
	}

	.item-on {
		background-color: #0e5642 !important;
		color: #ffffff;
	}

	.itemon {
		color: #0e5642;
		font-size: 28rpx;
	}

	.Reset {
		width: 50%;
		height: 60rpx;
		background-color: '#0e5642';
	}

	.button-two {
		color: white;
		text-align: center;
		background-color: #0e5642;
		line-height: 60rpx;
		height: 60rpx;
		// border-bottom-right-radius: 10rpx;
	}

	.button-one {
		color: #646262;
		text-align: center;
		line-height: 60rpx;
		height: 60rpx;
		// border-bottom-left-radius: 10rpx;
	}

	.boxrea {
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}
</style>
